<!DOCTYPE HTML>
<html>
	<head>
		<style type="text/css">

			.toolbar {
				height: 50px;
				font-size: 11px;
				padding-bottom: 5px;
				border-bottom: 1px solid #515151;
			}

			.toolbar .button {
				padding-top: 5px;
				padding-left: 5px;
				padding-right: 5px;
				min-width: 51px;
				min-height: 51px;
				white-space: nowrap;
				text-align: center;
				text-shadow: 0px 1px 1px #CCCCCC;
			}

			.toolbar .button.disabled {
				opacity: 0.5;
			}

			.toolbar .button .pushed {
				display: none;
			}

			.toolbar .button.pushed {
				text-shadow: none;
			}

			.toolbar .button.pushed img {
				opacity: 0.7;
			}

			.toolbar .button.pushed .normal {
				display: none;
			}

			.toolbar .button.pushed .pushed {
				display: inline;
			}

			.toolbar .separator {
				width: 6px;
				height: 51px;
				background-image: url('media/separator.png');
				background-position: center top;
				background-repeat: repeat-y;
			}

			.toolbar .clear {
				clear: both;
			}

		</style>

		<style type="text/css">
			.resize-v {
				width: 9px;
				cursor: ew-resize;
				background-image: url('media/resize-p.png'), url('media/resize-v.png');
				background-position: center center;
				background-repeat: no-repeat, repeat-y;
			}

			.resize-h {
				height: 9px;
				cursor: ns-resize;
				background-image: url('media/resize-p.png'), url('media/resize-h.png');
				background-position: center center;
				background-repeat: no-repeat, repeat-x;
			}

			.statusbar {
				height: 22px;
				line-height: 20px;
				font-size: 11px;
				text-shadow: 0px 1px 1px #CCCCCC;
				text-align: center;
				border-top: 1px solid #919191;
			}

			.header1 {
				color: #72777F;
				font-size: 11px;
				font-weight: bold;
				padding: 3px 6px 3px 6px;
				text-shadow: 0px 1px 1px #EDF0F0;
				background-image: url('media/header1.png');
				background-position: left top;
				background-repeat: repeat-x;
				background-color: #D0D5D9;
				border-top: 1px solid #EBEDEF;
				border-bottom: 1px solid #A2A7AC;
			}
		</style>

		<!--style type="text/css">
			
			::-webkit-scrollbar {
				display: block;
				background-color: blue;
			}

			::-webkit-scrollbar:window-inactive {
				background-color: white;
			}

			::-webkit-resizer  {
				background-color: lime;
			}

			::-webkit-scrollbar-button:start:decrement,
			::-webkit-scrollbar-button:end:increment {
				background-color: green;
			}

			::-webkit-scrollbar-button:horizontal:start:decrement,
			::-webkit-scrollbar-button:horizontal:end:increment {
				/*
				height: 1px;
				display: block;
				*/
				background-color: orange;
			}

			::-webkit-scrollbar-track-piece {
			}

			::-webkit-scrollbar-thumb:vertical,
			::-webkit-scrollbar-thumb:horizontal {
				background-color: red;
				/*
				background-color: white;
				border: 1px solid #639ACE;
				-webkit-border-radius: 6px;
				*/
			}

		</style-->

		</head>
	<body ondblclick="window.location.reload();">

		<div class="align align-top toolbar">
			<div class="button align align-left">
				<img src="media/tb-check-out.png" />
				<div>Check Out</div>
			</div>
			<div class="button disabled  align align-left">
				<img src="media/tb-new-folder.png" />
				<div>New Folder</div>
			</div>
			<div class="separator  align align-left"></div>

			<div class="button align align-left">
				<img src="media/property-preferences-icon.png" />
				<div>User Properties</div>
			</div>

			<div class="button align align-left">
				<img src="media/tb-software-update.png" />
				<div>Software Update</div>
			</div>

			<div class="button align align-left">
				<img src="media/advanced-preferences-icon.png" />
				<div>Advanced</div>
			</div>

			<div class="separator  align align-left"></div>
			<pre class="align align-client" style="background-color: blue; opacity: 0.5;"></pre>
			<div class="separator  align align-right"></div>
			<div class="button pushed  align align-right">
				<img src="media/tb-update.png?filter-brightness=-70" />
				<div>Update</div>
			</div>
			<div class="button align align-right">
				<img src="media/tb-commit.png" class="normal" />
				<img src="media/tb-commit.png?filter-brightness=-70" class="pushed" />
				<div>Commit</div>
			</div>
		</div>

		<div class="align align-left" style="width: 300px;">

			<div class="header1 align align-top">
				WORKING COPIES
			</div>

			<div class="align align-client" style="background-color: #DEE4EA;">
				<div>LIST 1</div>
				<div>LIST 1</div>
				<div>LIST 1</div>
				<div>LIST 1</div>
				<div>LIST 1</div>
				<div>LIST 1</div>
				<div>LIST 1</div>
				<div>LIST 1</div>
				<div>LIST 1</div>
				<div>LIST 1</div>
				<div>LIST 1</div>
				<div>LIST 1</div>
				<div>LIST 1</div>
			</div>

			<div class="align align-bottom resize-h"></div>

			<div class="align align-bottom header1">
				REPOSITORIES
			</div>
			<div class="align align-bottom" style="overflow: auto;  background-color: #DEE4EA;height: 300px;">
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
				<div>ALIGN=BOTTOM</div>
			</div>
		</div>

		<div class="align align-left resize-v"></div>

		<div class="align align-client" style="">
				<iframe src="http://www.google.com/" style="width: 100%; height: 100%;"></iframe>
		</div>


		<div class="align align-right resize-v"></div>

		<div class="align align-right" style="background-image: url('media/stripes.png'); width: 300px;">
			<div class="align-top" style="height: 19px; line-height: 19px;">
				<div class="align-left">Desktop</div>
				<div class="align-right" style="height: 100%;">
					<select style="margin: 0px; position: relative; margin-top: -2px;">
						<option>value1</option>
						<option>value2</option>
						<option>value3</option>
						<option>value4</option>
					</select>
				</div>
			</div>
			<div class="align-top" style="height: 19px; line-height: 19px;">Documents</div>
			<div class="align-top" style="height: 19px; line-height: 19px;">Downloads</div>
			<div class="align-top" style="height: 19px; line-height: 19px;">jPath</div>
		</div>

		<div class="align align-bottom statusbar">
			16 items, 141.53 GB available
		</div>

	</body>
</html>